<template>
    <div class="topo-toolbox">
        <!--        <div class="toolbox">-->
        <!--            <span>工具箱</span>-->
        <!--        </div>-->
        <main class="topo-toolbox__main">
            <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本组件" name="基本组件">
                    <el-tooltip class="item" effect="dark" content="基本组件" placement="right" slot="label">
                        <el-image v-if="activeName === '基本组件'" style="width: 30px; height: 30px" :src="zujianImageAct" fit="fit" />
                        <el-image v-else style="width: 30px; height: 30px" :src="zujianImage" fit="fit" />
                    </el-tooltip>
                </el-tab-pane>
                <el-tab-pane label="基本形状" name="基本形状">
                    <el-tooltip class="item" effect="dark" content="基本形状" placement="right" slot="label">
                        <el-image v-if="activeName === '基本形状'" style="width: 30px; height: 30px" :src="shapeImageAct" fit="fit" />
                        <el-image v-else style="width: 30px; height: 30px" :src="shapeImage" fit="fit" />
                    </el-tooltip>
                </el-tab-pane>
                <el-tab-pane label="统计图形" name="统计图形">
                    <el-tooltip class="item" effect="dark" content="统计图形" placement="right" slot="label">
                        <el-image v-if="activeName === '统计图形'" style="width: 30px; height: 30px" :src="echartImageAct" fit="fit" />
                        <el-image v-else style="width: 30px; height: 30px" :src="echartImage" fit="fit" />
                    </el-tooltip>
                </el-tab-pane>
                <el-tab-pane label="工业元件" name="工业元件">
                    <el-tooltip class="item" effect="dark" content="工业元件" placement="right" slot="label">
                        <el-image v-if="activeName === '工业元件'" style="width: 30px; height: 30px" :src="gongyeImageAct" fit="fit" />
                        <el-image v-else style="width: 30px; height: 30px" :src="gongyeImage" fit="fit" />
                    </el-tooltip>
                </el-tab-pane>
                <el-tab-pane label="图表元件" name="图表元件">
                    <el-tooltip class="item" effect="dark" content="图表元件" placement="right" slot="label">
                        <el-image v-if="activeName === '图表元件'" style="width: 30px; height: 30px" :src="tucengImageAct" fit="fit" />
                        <el-image v-else style="width: 30px; height: 30px" :src="tucengImage" fit="fit" />
                    </el-tooltip>
                </el-tab-pane>
                <el-tab-pane label="更多元件" name="更多元件">
                    <el-tooltip class="item" effect="dark" content="更多元件" placement="right" slot="label">
                        <el-image v-if="activeName === '更多元件'" style="width: 30px; height: 30px" :src="customImageAct" fit="fit" />
                        <el-image v-else style="width: 30px; height: 30px" :src="customImage" fit="fit" />
                    </el-tooltip>
                </el-tab-pane>
            </el-tabs>
            <div class="menuClassGyzj flex-1" style="width: calc(100% - 64px)">
                <template v-if="activeName == '基本组件'">
                    <DataPanel ref="dataPanel" :data="jsonBase" />
                </template>
                <template v-if="activeName == '基本形状'">
                    <DataPanel ref="dataPanel" :data="jsonShape" />
                </template>
                <template v-if="activeName == '统计图形'">
                    <DataPanel ref="dataPanel" :data="jsonChart" />
                </template>
                <template v-if="activeName == '工业元件'">
                    <el-menu default-active="1" unique-opened @open="handleOpen" :collapse="isCollapse">
                        <el-submenu :index="item.id" v-for="(item, index) in toolboxData" :key="index">
                            <template slot="title">
                                <q-icon name="burst_mode" size="20px" style="margin-right: 8px" />
                                <span>{{ item.title }}（{{ item.number }}）</span>
                            </template>
                            <el-menu-item-group v-loading="loading" element-loading-text="正在初始化..." element-loading-background="#f1f3f4" class="topo-toolbox">
                                <DataPanel ref="dataPanel" :data="item.data" />
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </template>
                <template v-if="activeName == '图表元件'">
                    <el-menu default-active="1" unique-opened @open="handleEchartOpen" :collapse="isCollapse">
                        <el-submenu :index="item.id" v-for="(item, index) in echartData" :key="index">
                            <template slot="title">
                                <q-icon name="burst_mode" size="20px" style="margin-right: 8px" />
                                <span>{{ item.title }}</span>
                            </template>
                            <el-menu-item-group v-loading="loading" element-loading-text="正在初始化..." class="topo-toolbox">
                                <DataPanel ref="dataPanel" :data="item.data" />
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </template>
                <template v-if="activeName == '更多元件'">
                    <DataPanel ref="dataPanel" :data="customData" style="overflow: auto" />
                </template>
            </div>
        </main>
        <!--        <el-row>-->
        <!--            <el-col :style="{width:leftWidth}">-->
        <!--            </el-col>-->
        <!--            <el-col class="menuClassGyzj" :style="{width:rightWidth}">-->
        <!--                <template v-if="activeName == '基本组件'">-->
        <!--                    <DataPanel ref="dataPanel" :data="jsonBase"/>-->
        <!--                </template>-->
        <!--                <template v-if="activeName == '基本形状'">-->
        <!--                    <DataPanel ref="dataPanel" :data="jsonShape"/>-->
        <!--                </template>-->
        <!--                <template v-if="activeName == '统计图形'">-->
        <!--                    <DataPanel ref="dataPanel" :data="jsonChart"/>-->
        <!--                </template>-->
        <!--                <template v-if="activeName == '工业元件'">-->
        <!--                    <el-menu default-active="1" unique-opened @open="handleOpen" :collapse="isCollapse">-->
        <!--                        <el-submenu :index="item.id" v-for="(item, index) in toolboxData" :key="index">-->
        <!--                            <template slot="title">-->
        <!--                                <q-icon name="burst_mode" size="20px" style="margin-right: 8px;"/>-->
        <!--                                <span>{{ item.title }}（{{ item.number }}）</span>-->
        <!--                            </template>-->
        <!--                            <el-menu-item-group v-loading="loading" element-loading-text="正在初始化..."-->
        <!--                                                element-loading-background="#f1f3f4"-->
        <!--                                                class="topo-toolbox"-->
        <!--                            >-->
        <!--                                <DataPanel ref="dataPanel" :data="item.data"/>-->
        <!--                            </el-menu-item-group>-->
        <!--                        </el-submenu>-->
        <!--                    </el-menu>-->
        <!--                </template>-->
        <!--                <template v-if="activeName == '图表元件'">-->
        <!--                    <el-menu default-active="1" unique-opened @open="handleEchartOpen" :collapse="isCollapse">-->
        <!--                        <el-submenu :index="item.id" v-for="(item, index) in echartData" :key="index">-->
        <!--                            <template slot="title">-->
        <!--                                <q-icon name="burst_mode" size="20px" style="margin-right: 8px;"/>-->
        <!--                                <span>{{ item.title }}</span>-->
        <!--                            </template>-->
        <!--                            <el-menu-item-group v-loading="loading" element-loading-text="正在初始化..."-->
        <!--                                                class="topo-toolbox"-->
        <!--                            >-->
        <!--                                <DataPanel ref="dataPanel" :data="item.data"/>-->
        <!--                            </el-menu-item-group>-->
        <!--                        </el-submenu>-->
        <!--                    </el-menu>-->
        <!--                </template>-->
        <!--                <template v-if="activeName == '更多元件'">-->
        <!--                    <DataPanel ref="dataPanel" :data="customData" style="overflow: auto;"/>-->
        <!--                </template>-->
        <!--            </el-col>-->
        <!--        </el-row>-->
        <div class="shortcutKey">
            <el-popover ref="popover" placement="top" title="快捷键" trigger="click">
                <div style="font-size: 15px; margin-bottom: 5px"><span>ctrl+z:撤销</span></div>
                <div style="font-size: 15px; margin-bottom: 5px"><span>ctrl+y:恢复</span></div>
                <div style="font-size: 15px; margin-bottom: 5px"><span>ctrl+c:复制</span></div>
                <div style="font-size: 15px; margin-bottom: 5px"><span>ctrl+v:粘贴</span></div>
                <div style="font-size: 15px; margin-bottom: 5px"><span>ctrl+s:保存</span></div>
                <div style="font-size: 15px; margin-bottom: 5px"><span>Detele:删除</span></div>
            </el-popover>
            <el-image style="width: 30px; height: 30px" :src="kuaijiejianImage" fit="fit" v-popover:popover></el-image>
        </div>
    </div>
</template>

<script>
import jsonBase from './data-toolbox/base.json';
import jsonShape from './data-toolbox/shape.json';
import jsonChart from './data-toolbox/chart.json';
import jsonIcon from './data-toolbox/icon.json';
import DataPanel from './data-panel/index';
import uid from '@/views/zutai/api/zutai/uid.js';
import zujianImage from '@/views/zutai/components/topo/images/tab/zujian.svg';
import shapeImage from '@/views/zutai/components/topo/images/tab/shape.svg';
import echartImage from '@/views/zutai/components/topo/images/tab/echart.svg';
import gongyeImage from '@/views/zutai/components/topo/images/tab/gongye.svg';
import tucengImage from '@/views/zutai/components/topo/images/tab/tuceng.svg';
import customImage from '@/views/zutai/components/topo/images/tab/custom.svg';
import zujianImageAct from '@/views/zutai/components/topo/images/tab/zujian_act.svg';
import shapeImageAct from '@/views/zutai/components/topo/images/tab/shape_act.svg';
import echartImageAct from '@/views/zutai/components/topo/images/tab/echart_act.svg';
import gongyeImageAct from '@/views/zutai/components/topo/images/tab/gongye_act.svg';
import tucengImageAct from '@/views/zutai/components/topo/images/tab/tuceng_act.svg';
import customImageAct from '@/views/zutai/components/topo/images/tab/custom_act.svg';
import kuaijiejianImage from '@/views/zutai/components/topo/images/kuaijiejian.svg';
import request from '@/utils/request';
import QIcon from '../QIcon/index.vue';

export default {
    name: 'TopoToolbox',
    components: {
        QIcon,
        DataPanel,
        jsonBase,
        jsonShape,
        jsonChart,
        jsonIcon,
        zujianImage,
        shapeImage,
        echartImage,
        gongyeImage,
        tucengImage,
        customImage,
        zujianImageAct,
        shapeImageAct,
        echartImageAct,
        gongyeImageAct,
        tucengImageAct,
        customImageAct,
        kuaijiejianImage,
    },
    data() {
        return {
            toolbox: [],
            items: [],
            selectedIndex: -1,
            toolboxData: [],
            loading: false,
            jsonBase: jsonBase,
            jsonBaseNum: jsonBase.items.length,
            jsonChart: jsonChart,
            jsonChartNum: jsonChart.items.length,
            jsonShape: jsonShape,
            jsonShapeNum: jsonShape.items.length,
            jsonIcon: jsonIcon,
            jsonIconNum: jsonIcon.items.length,
            isCollapse: false,
            isTest: false,
            zujianImage: zujianImage,
            shapeImage: shapeImage,
            echartImage: echartImage,
            gongyeImage: gongyeImage,
            tucengImage: tucengImage,
            customImage: customImage,
            kuaijiejianImage: kuaijiejianImage,
            zujianImageAct,
            shapeImageAct,
            echartImageAct,
            gongyeImageAct,
            tucengImageAct,
            customImageAct,
            activeName: '基本组件',
            echartData: [],
            leftWidth: '20%',
            rightWidth: '80%',
            customData: {},
            baseUrl: window.location.origin + process.env.VUE_APP_BASE_API,
        };
    },
    mounted() {
        if (window.screen.width <= 1366) {
            this.leftWidth = '30%';
            this.rightWidth = '70%';
        } else if (window.screen.width <= 1600) {
            this.leftWidth = '28%';
            this.rightWidth = '72%';
        }
        this.getImageType();
        this.getEchartType();
        this.getCustom();
    },
    methods: {
        getTabStyle(type) {
            let style = {};
            if (type == '基本形状') {
                style = {
                    backgroundColor: '#000',
                };
            } else {
                style = {
                    backgroundColor: '#000',
                };
            }
            return style;
        },
        handleClick() {
            console.log(this.activeName);
            // if(this.activeName=='工业元件'){
            //   this.getImageType();
            // }else if(this.activeName=='图表元件'){
            //   this.getEchartType();
            // }else if(this.activeName=='更多组件'){
            //   this.getCustom();
            // }
        },
        //获取图库类别
        getImageType() {
            let query = {};
            let url = '/zutai/upload/getImageType';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                this.toolboxData = res.data;
            });
        },
        //获取图表类别
        getEchartType() {
            const this_ = this;
            let query = {};
            let url = '/system/dict/data/type/scada_echart_type';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                this_.echartData = [];
                res.data.forEach((element, index) => {
                    let tyData = {
                        id: 1000 + (index + 1) + '-' + element.dictValue,
                        title: element.dictValue,
                        data: {},
                    };
                    this_.echartData.push(tyData);
                });
            });
        },
        onDragstart(event, info) {
            var infoJson = JSON.stringify(info.info);
            event.dataTransfer.setData('my-info', infoJson);
        },
        getJson() {
            let newJson = {
                title: '',
                icon: 'payment',
                opened: false,
                items: [],
            };
            return newJson;
        },
        getJsonItem() {
            let newJson = {
                text: '',
                icon: 'image',
                info: {
                    type: 'image',
                    icon: '',
                    componentShow: ['动画', '单击', '组件颜色', '滤镜渲染', '组件填充', '参数绑定'],
                    action: [],
                    hdClassName: '',
                    identifier: uid(),
                    dataBind: {
                        queryParam: {},
                        imei: '',
                        paramField: '',
                        paramName: '',
                        driveName: '',
                        action: '',
                        paramValue: '',
                        redirectUrl: '',
                        stateList: [],
                        xyAction: false,
                        xzAction: false,
                        ssAction: false,
                        hdAction: false,
                        djAction: false,
                    },
                    dataAction: {
                        //动作判断字段
                        imei: '',
                        paramField: '',
                        paramName: '',
                        paramJudge: '',
                        paramJudgeData: '',
                        rotationSpeed: '中',
                        translateList: [],
                    },
                    style: {
                        position: {
                            x: 200,
                            y: 200,
                            w: 100,
                            h: 100,
                        },
                        backColor: 'transparent',
                        foreColor: '',
                        zIndex: 1,
                        transform: 0,
                        url: '',
                        transformType: 'rotate(0deg)',
                        isFilter: true,
                    },
                },
            };
            return newJson;
        },
        getImages(label, index) {
            let query = {
                pageNum: 1,
                pageSize: 999,
                moduleName: label,
                moduleGuid: '云组态',
                orderByColumn: 'updateTime',
                isAsc: 'desc',
            };
            let url = '/zutai/upload/list';
            request({
                url: url,
                method: 'get',
                params: query,
            })
                .then((res) => {
                    if (res.code == 200) {
                        if (res.rows.length > 0) {
                            let newJson = this.getJson();
                            res.rows.forEach((element) => {
                                newJson.title = element.moduleName;
                                let newJsonItem = this.getJsonItem();
                                newJsonItem.text = element.fileName;
                                newJsonItem.icon = this.baseUrl + element.resourceUrl;
                                newJsonItem.info.style.url = this.baseUrl + element.resourceUrl;
                                newJsonItem.info.icon = this.baseUrl + element.resourceUrl;
                                newJson.items.push(newJsonItem);
                            });
                            this.toolboxData[index].data = newJson;
                            // console.log(this.toolboxData);
                        }
                    }
                    this.loading = false;
                })
                .catch((error) => {
                    console.log(error);
                    this.loading = false;
                });
        },
        handleOpen(key, keyPath) {
            this.loading = true;
            let strArr = key.split('-');
            this.getImages(strArr[1], strArr[0] - 1001);
        },
        handleEchartOpen(key, keyPath) {
            this.loading = true;
            let strArr = key.split('-');
            this.getEcharts(strArr[1], strArr[0] - 1001);
        },
        getEchartJson() {
            let newJson = {
                title: '',
                icon: 'payment',
                opened: false,
                items: [],
            };
            return newJson;
        },
        getEchartJsonItem(option) {
            let newJson = {
                text: '自定义',
                icon: 'format_list_bulleted',
                info: {
                    type: 'chart-wrapper',
                    componentShow: ['自定义echarts'],
                    action: [],
                    dataBind: {
                        echartOption: option,
                        echartRun: 0,
                        paramData: [
                            {
                                key: '',
                                value: '',
                            },
                        ],
                        bodyDataTable: [
                            {
                                key: '',
                                value: '',
                            },
                        ],
                        headerData: [
                            {
                                key: '',
                                value: '',
                            },
                        ],
                    },
                    style: {
                        position: {
                            x: 0,
                            y: 0,
                            w: 300,
                            h: 300,
                        },
                        backColor: 'rgba(0, 0, 0, 0)',
                        foreColor: '#000',
                        zIndex: 1,
                        transform: 0,
                        transformType: 'rotate(0deg)',
                    },
                },
            };
            return newJson;
        },
        getEcharts(label, index) {
            const this_ = this;
            let query = {
                pageNum: 1,
                pageSize: 999,
                echartType: label,
                orderByColumn: 'id',
                isAsc: 'desc',
            };
            let url = '/zutai/bEchartType/list';
            request({
                url: url,
                method: 'get',
                params: query,
            })
                .then((res) => {
                    if (res.code == 200) {
                        if (res.rows.length > 0) {
                            let newJson = this_.getEchartJson();
                            res.rows.forEach((element) => {
                                newJson.title = element.echartName;
                                //为提高刷新图表的速度，关联字段存储图表的id
                                let newJsonItem = this_.getEchartJsonItem('echartId-' + element.id);
                                newJsonItem.text = element.echartName;
                                if (element.echartImgae) {
                                    newJsonItem.icon = this_.baseUrl + element.echartImgae;
                                } else {
                                    newJsonItem.icon = this_.noImage;
                                }
                                newJsonItem.type = '图表元件';
                                newJson.items.push(newJsonItem);
                            });
                            this_.echartData[index].data = newJson;
                        }
                    }
                    this.loading = false;
                })
                .catch((error) => {
                    console.log(error);
                    this.loading = false;
                });
        },

        //获取自定义组件
        getCustomJsonItem(id) {
            let newJson = {
                text: '自定义场景',
                icon: 'statics/topo/images/3d.png',
                info: {
                    type: 'custom',
                    icon: 'statics/topo/images/3d.png',
                    componentShow: ['动画'],
                    modelUrl: '',
                    imageUrl: '',
                    action: [],
                    dataBind: {
                        sn: '',
                        title: '',
                        biz: '',
                        customId: id,
                    },
                    dataAction: {
                        imei: '',
                        paramField: '',
                        paramName: '',
                        paramJudge: '',
                        paramJudgeData: '',
                        rotationSpeed: '中',
                        translateList: [],
                        xyAction: false,
                        xzAction: false,
                        ssAction: false,
                        hdAction: false,
                        djAction: false,
                    },
                    style: {
                        position: {
                            x: 0,
                            y: 0,
                            w: 300,
                            h: 200,
                        },
                        backColor: '#0000',
                        transform: 0,
                        transformType: 'rotate(0deg)',
                    },
                },
            };
            return newJson;
        },
        getCustom() {
            this.customData = {};
            let query = {
                pageNum: 1,
                pageSize: 999,
                orderByColumn: 'id',
                isAsc: 'desc',
            };
            let url = '/zutai/bVueComponent/list';
            request({
                url: url,
                method: 'get',
                params: query,
            })
                .then((res) => {
                    if (res.rows.length > 0) {
                        let newJson = this.getJson();
                        res.rows.forEach((element) => {
                            newJson.title = element.componentName;
                            //为提高刷新图表的速度，关联字段存储图表的id
                            let newJsonItem = this.getCustomJsonItem(element.id);
                            newJsonItem.text = element.componentName;
                            if (element.componentImage) {
                                newJsonItem.icon = this.baseUrl + element.componentImage;
                            } else {
                                newJsonItem.icon = this.noImage;
                            }
                            newJsonItem.type = '图表元件';
                            newJson.items.push(newJsonItem);
                        });
                        console.log(newJson, '更多原件数据');
                        this.customData = newJson;
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.topo-toolbox__main {
    display: flex;
    height: 100%;
    overflow: hidden;
    .el-tabs {
        box-sizing: border-box;
        width: 64px;
        height: 100vh;
        border-right: solid 1px #d3d8da;
        flex-shrink: 0;

        ::v-deep .el-tabs__header.is-left {
            width: 100%;
            margin-right: 0;
        }
        ::v-deep .el-tabs__item {
            height: 50px;
            margin: 24px 8px 0;
            padding: 10px;
            text-align: center;
            border-radius: 4px;
            &:hover,
            &.is-active {
                background: #f5f7fa;
            }
        }
    }
    .flex-1 {
        flex: 1;
    }
}
.topo-toolbox {
    // border: #ccc solid 1px;
    //background-color: #f1f3f4;
    overflow-y: hidden;
    overflow-x: hidden;
    //height: 100%;
}

.menuClassGyzj {
    height: 100%;
    //background-color: #f1f3f4;
    overflow-y: auto;
    overflow-x: hidden;
}

.menuClassGyzj::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.menuClassGyzj::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

.menuClassGyzj::-webkit-scrollbar-track {
    background-color: #ddd;
}

.topo-toolbox .el-submenu__title {
    //background-color: #f1f3f4;
}

.item-icon {
    height: 10px;

    .iconfont {
        font-size: 10px;
        margin-left: 14px;
    }
}
</style>
<style>
.topo-toolbox::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.topo-toolbox::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

.topo-toolbox::-webkit-scrollbar-track {
    background-color: #ddd;
}

.topo-toolbox .el-submenu__title {
    //background-color: #f1f3f4;
}

.topo-toolbox .el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
    display: none;
}

.toolbox {
    font-family: Source Han Sans CN;
    font-size: 25px;
    padding-left: 10px;
    font-weight: 700;
    background: linear-gradient(315deg, #c805bb 3%, #49df5d 28%, #383fa0 28%, #30eee2 68%, #ff1919 98%);
    -webkit-animation: toolbox-data 8s ease infinite;
    animation: toolbox-data 8s ease infinite;
    background-size: 400% 400%;
    color: transparent;
    margin-bottom: 10px;
    border-bottom: solid 1px #d3d8da;
}

@keyframes toolbox-data {
    0% {
        background-position: 0 0;
        -webkit-background-clip: text;
    }

    50% {
        background-position: 100% 100%;
        -webkit-background-clip: text;
    }

    100% {
        background-position: 0 0;
        -webkit-background-clip: text;
    }
}

.shortcutKey {
    position: absolute;
    left: 20px;
    bottom: 10px;
    cursor: pointer;
}
</style>
